<template>
  <div>
    <el-card>
      <p>添加题目</p>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上传者">
          <el-input v-model="ruleForm.uploader" style="width:220px" />
        </el-form-item>
        <el-form-item label="题目分类" prop="cate">
          <el-select v-model="ruleForm.cate" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.cateName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容" prop="title">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="题目答案" prop="answer">
          <quill-editor
            ref="richAnalysis"
            v-model="ruleForm.answer"
            :options="editorOption"
            style="color:#333"
          />
        </el-form-item>
        <el-form-item class="tij">
          <el-button type="primary" @click="add">立即添加</el-button>
          <el-button @click="fan">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
 import { ImageDrop } from 'quill-image-drop-module'
 import ImageResize from 'quill-image-resize-module'
 Quill.register('modules/imageDrop', ImageDrop);
 Quill.register('modules/imageResize', ImageResize);
 const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
  [{ 'direction': 'rtl' }],                         // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
  [{ 'font': [] }], // 字体
  [{ 'align': [] }],    // 居中
  ['clean'],            // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]
export default {
  components: {},
  props: {},
  data() {
    return {
       // 富文本编辑器配置
      editorOption: {
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow：有工具栏的；bubble：只有文本域的
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
          imageDrop: true,      //图片拖拽
          imageResize: {          //放大缩小
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: {
            container: toolbarOptions, //工具栏
            handlers: {
            }
          },
        }
      },
      options: [],
      ruleForm: {
        title: '',
        answer: '',
        uploader: '',
        cate: ''
      },
      rules: {
        cate: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入题目', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.getlei()
    // var res=await this.http.get('/cateall')
    // if(res.data.code==200){
    //     this.options=res.data.data
    // }
    // console.log(this.options)
    // this.ruleForm.uploader=sessionStorage.getItem("user")
  },
  mounted() {},
  methods: {
    fan() {
      this.$router.go(-1)
    },
    async add() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.post('/knowledge/ques/', this.ruleForm)
          console.log(res)
          if (res.data.code == 200) {
            this.$message.success('添加题目成功')
            this.$router.push('/question')
          } else {
            this.$message.error('添加题目失败')
          }
        } else {
          this.$message.error('格式错误')
        }
      })
    },
    async getlei() {
      var res = await this.http.get('/knowledge/lei/')

      console.log(res, 'lei')
      //   var res=await this.http.get('/cateall')
      if (res.data.code == 200) {
        // this.tableData = res.data.data1
        this.options = res.data.data
        // this.queryInfo.t=res.data.count
      }
    }
  }
}
</script>
<style scoped>
    .quill-editor{
      height: 280px;
    }
    .tij{
      margin-top: 100px;
    }
    .el-form{
        margin-top: 20px;
    }
</style>
